import React from 'react'

interface Props {
  onAuth: () => void
  loading: boolean
  isWechat: boolean
}

const AuthButton: React.FC<Props> = ({ onAuth, loading, isWechat }) => {
  const handleClick = () => {
    if (!loading) onAuth()
  }

  if (!isWechat) {
    return (
      <div className="error-message">
        <h3>⚠️ 环境提示</h3>
        <p>请在微信中打开此页面以获得完整体验</p>
        <p>您可以将链接分享到微信中打开</p>
      </div>
    )
  }

  return (
    <div style={{ textAlign: 'center', padding: '40px 20px' }}>
      <div style={{ marginBottom: '30px' }}>
        <h2 style={{ color: '#333', marginBottom: '10px' }}>欢迎使用</h2>
        <p style={{ color: '#666', fontSize: '16px' }}>点击下方按钮授权登录，获取您的微信头像和基本信息</p>
      </div>

      <button className="auth-button" onClick={handleClick} disabled={loading} style={{ maxWidth: '300px', position: 'relative', overflow: 'hidden' }}>
        {loading ? (
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div className="loading-spinner" style={{ width: '20px', height: '20px', marginRight: '10px', marginBottom: 0, borderWidth: '2px' }} />
            授权中...
          </div>
        ) : (
          <>
            <span style={{ marginRight: '8px' }}>🔐</span>
            微信授权登录
          </>
        )}
      </button>

      <div style={{ marginTop: '20px', fontSize: '12px', color: '#999' }}>
        <p>授权后我们将获取您的：</p>
        <p>• 头像信息 • 昵称 • 地区信息</p>
        <p>我们承诺保护您的隐私安全</p>
      </div>
    </div>
  )
}

export default AuthButton
